<template>
	<view>
		<view  class="btn_Suspension" @click="btn_Suspension_click" @catchtouchmove="buttonMove"
			@touchstart="buttonStart" @touchend="buttonEnd" :style="[{'margin-top:'+{{buttonTop}}+'px','margin-left:'+{{buttonLeft}}+'px'}]">
			<view v-if="{{corner_data==0}}"></view>
			<view v-else>
				<view class="cornorMark">
					<text>{{corner_data}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//按钮位置参数
				buttonTop: 0,
				buttonLeft: 0,
				windowHeight: '',
				windowWidth: '',
				//角标显示数字
				corner_data: 0,
			}
		},
		onLoad: function() {
			//定义角标数字
			this.setData({
				corner_data: 3
			})
			// 获取购物车控件适配参数
			var that = this;
			wx.getSystemInfo({
				success: function(res) {
					console.log(res);
					// 屏幕宽度、高度
					console.log('height=' + res.windowHeight);
					console.log('width=' + res.windowWidth);
					// 高度,宽度 单位为px
					that.setData({
						windowHeight: res.windowHeight,
						windowWidth: res.windowWidth,
						buttonTop: res.windowHeight * 0.70, //这里定义按钮的初始位置
						buttonLeft: res.windowWidth * 0.70, //这里定义按钮的初始位置
					})
				}
			})
		},
		methods: {
			//可拖动悬浮按钮点击事件
			btn_Suspension_click: function() {
				//这里是点击购物车之后将要执行的操作
				wx.showToast({
					title: '点击成功',
					icon: 'success',
					duration: 1000
				})
			},
			//以下是按钮拖动事件
			buttonStart: function(e) {
				startPoint = e.touches[0] //获取拖动开始点
			},
			buttonMove: function(e) {
				var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
				//计算在X轴上拖动的距离和在Y轴上拖动的距离
				var translateX = endPoint.clientX - startPoint.clientX
				var translateY = endPoint.clientY - startPoint.clientY
				startPoint = endPoint //重置开始位置
				var buttonTop = this.data.buttonTop + translateY
				var buttonLeft = this.data.buttonLeft + translateX
				//判断是移动否超出屏幕
				if (buttonLeft + 50 >= this.data.windowWidth) {
					buttonLeft = this.data.windowWidth - 50;
				}
				if (buttonLeft <= 0) {
					buttonLeft = 0;
				}
				if (buttonTop <= 0) {
					buttonTop = 0
				}
				if (buttonTop + 50 >= this.data.windowHeight) {
					buttonTop = this.data.windowHeight - 50;
				}
				this.setData({
					buttonTop: buttonTop,
					buttonLeft: buttonLeft
				})
			},
			buttonEnd: function(e) {}
		}
	}
</script>

<style>
	/**可拖动悬浮按钮样式表**/
	.btn_Suspension {
		position: fixed;
		height: 100rpx;
		width: 100rpx;
		background-color: rgba(255, 255, 255, 0.755);
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99999;
		box-shadow: 1px 0px 1px 1px #ede7e7;
	}

	.Suspension_logo {
		position: absolute;
		height: 50%;
		width: 50%;
		left: 23%;
		top: 27%
	}

	.cornorMark {
		position: absolute;
		background: rgb(242, 109, 38);
		border: 1px solid rgb(242, 109, 38);
		border-radius: 100px;
		width: 30rpx;
		height: 30rpx;
		top: -17rpx;
		right: 3rpx;
		color: #fff;
		font-size: 12px;
		text-align: center;
	}

	.cornorMark text {
		position: absolute;
		width: 100%;
		left: 0%;
		text-align: center;
		top: -1px;
	}
</style>
